<template>
  <div>
    <el-dialog
      title="搜索页面"
      width="80%"
      :visible.sync="dialogVisible"
      class="showDialogClass"
      :before-close="handleClose"
    >
      <div class="dialog-warp">
        <div class="dialog-search">
          <el-input
            placeholder="标题搜索"
            size="medium"
            style="width: 300px;
                height: 50px;
                border-radius: 10px;"
            v-model="queryForm.textTitle"
          />
            &nbsp;
          <el-button
            size="medium"
            type="primary"
            @click="search"
          >
            搜索
          </el-button>
          <el-button
            size="medium"
            @click="rest"
          >
            重置
          </el-button>
        </div>

        <div class="dialog-content">
          <el-card
            class="box-card"
            v-for="(item, index) in searchData"
            :key="index"
          >
            <div
              class="doc-i"
              @click="handleDetail(item)"
            >
              <div class="doc-it">
                <p class="doc-it-tit">
                  {{ item.textTitle }}
                </p>
                <span class="doc-it-tab">
                  <span>{{
                    item.textOrder == null ? "暂无" : item.textOrder
                  }}</span>
                  <!-- <span>{{ item.fileSubTitle }}</span> -->
                  <span>{{ item.modifyUserName }}</span>
                  <span>{{
                    item.addDate
                  }}</span>
                </span>
              </div>
              <div class="doc-ib">
                <!-- <p>{{ item.textContent.replace(/<[^>]+>/g, "") }}</p> -->
                <p style="margin-top: 5px">
                  关键词>> <span>{{ item.textLabel }}</span>
                </p>
              </div>
            </div>
          </el-card>
          <!-- 分页 -->
          <vxe-pager
            background
            align="right"
            @page-change="handleCurrentChange"
            :current-page.sync="page.currentPage"
            :page-size.sync="page.pageSize"
            :total="page.totalResult"
            :layouts="[
              'PrevJump',
              'PrevPage',
              'JumpNumber',
              'NextPage',
              'NextJump',
              'Sizes',
              'FullJump',
              'Total',
            ]"
          />
        </div>
      </div>
      <helpTextSearchDialog
        v-if="helpTextSearchDialogFlag"
        ref="helpTextSearchDialogRef"
      />
    </el-dialog>
  </div>
</template>

    <script>
  import { helpTextList } from "@/api/datacentersg/archives/helpText";
  import helpTextSearchDialog from "./helpTextSearchDialog.vue"
  import store from "@/store";
  export default {
    name: `helpShowTextPage`,
    components: { helpTextSearchDialog },
    props: {
      searchResults: {
        type: Array,
        default: () => [],
      },
      currentPage: {
        type: Number,
        default: 1,
      },
      pageSize: {
        type: Number,
        default: 10,
      },
      total: {
        type: Number,
        default: 0,
      },
      isParentDataLoaded: {
        type: Boolean,
        default: false,
      },
    },
    watch: {
      searchResults: {
        immediate: true,
        handler: function (value) {
          this.searchData = value;
        },
      },
      total (value) {
        this.page.totalResult = value;
      },
    },
    data () {
      return {
        dialogVisible: false,
        inputValue: ``,
        page: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0,
        },
        searchData: [],
        queryForm: { textTitle: `` },
        isParent: `child`,
        isSearch: false, // 添加isSearch变量
        helpTextSearchDialogFlag: false,
      }
    },
    created () {
      this.search();
      this.inits();
    },
    methods: {
      init () {
        this.dialogVisible = true;
        this.searchData = this.searchResults;
        this.page.totalResult = this.total;
      },
      inits () {
        this.helpTextSearchDialogFlag = true;
      },
      search () {
        this.isParentDataLoaded = true; // 点击搜索时将isSearch设置为true
        this.getHelpTextList();
      },
      getHelpTextList () {
        return new Promise((resolve, reject) => {
          const params = {
            userId: store.getters.userId.toString(),
            token: store.getters.token.toString(),
            userName: store.getters.userName.toString(),
            data: {
              textBussinessTypeCode: 111,
              pageSize: this.page.pageSize,
              currentPage: this.page.currentPage,
              textTitle: this.queryForm.textTitle,
            },
          };
          helpTextList(params)
            .then((data) => {
              if (data.result) {
                this.searchData = data.resultdata.data
                this.page.totalResult = data.resultdata.count;
                resolve();
              }
            })
            .catch((error) => {
              reject(error);
            });
        });
      },
      handleCurrentChange ({ currentPage, pageSize }) {
        if (this.isParentDataLoaded === true) {
          this.page.currentPage = currentPage;
          this.page.pageSize = pageSize;
          this.getHelpTextList();
        }
        else if (this.isParentDataLoaded === false) {
          this.$emit(`change-page`, currentPage);
        }
      },
      updateData (searchResults, total, currentPage) {
        this.searchData = searchResults;
        this.page.totalResult = total;
        this.page.currentPage = currentPage;
      },
      handleDetail (item) {
        this.helpTextSearchDialogFlag = true;
        this.$refs.helpTextSearchDialogRef.inits(item);
      },
      handleClose () {
        this.cancel()
      },
      cancel () {
        this.dialogVisible = false
      },
      rest () {
        this.queryForm.textTitle=``;
      },
    },
  }
    </script>

    <style scoped>
    .box-card {
      width: 100%;
      margin-top: 5px;
    }
    .doc-it {
      margin-bottom: 10px;
    }

    .doc-it-co {
      padding: 10px;
      border: solid 1px #0e9aef;
      border-radius: 10px;
      float: left;
      margin-right: 30px;
      width: 150px;
      text-align: center;
    }

    .doc-it-tit {
      font-size: 0.938vw;
      font-weight: 700;
      margin-bottom: 0.26vw;
    }

    .doc-it-tab span {
      font-size: 14px;
      border-left: solid 1px #999999;
      padding: 0 10px;
    }

    .doc-it-tab span:first-child {
      border-left: none;
      padding-left: 0;
    }

    .doc-it-bth {
      float: right;
      margin-right: 50px;
      margin-top: -5px;
    }

    .doc-ib {
      width: 100%;
      padding: 5px 10px;
    }
    >>>.vxe-pager{
      height: 40 !important;
      border:none;
    }
    </style>
